<template>
    <div class="page">
        <!-- 保存之前版本这个文件在分类写好后可以直接删除 -->
        <div class="pages_con flex">
            <div class="menuleft">
                <div href="javascript:;" :class="{'active':ind === index}" class="weui-grid" v-for="(item,index) in categorylist" :key="index" @click="goCategory(item,index)">
                    <p class="weui-grid__label">
                        {{item.cateName}}
                    </p>
                </div>
            </div>
            <div class="listbox" ref="listbox">
                <div class="menuList" v-if="showMenu">
                    <div class="menubox" v-for="(item,index) in meunlist" :key="index" @click="goProList(item,index)">
                        <div class="imgBox">
                            <img :src="item.catePicUrl" alt="">
                        </div>
                        <p>{{item.cateName}}</p>
                    </div>
                </div>
                <div class="list" v-for="(item,index) in bottomlist" :key="index" v-if="!showMenu" @click="getcate(item)">
                    <img :src="item.coverPicUrl" alt="">
                    <div class="listcontent">
                        <div class="content">
                            <div class="cleft">
                                <div class="more">{{item.productName | sliceString(16)}}</div>
                                <div class="big">
                                    <p>{{item.salePrice}}元</p>
                                    <p class="qiang">立即抢</p>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="nodata" v-if="showBg">
                    <img src="./../../../assets/noshop.png" alt="">
                    <p class="fontcolor">暂无商品,去看看别的吧</p>
                </div>
            </div>
        </div>
        <botNavigation />
    </div>
</template>
<script>
import {
    getproductlist,
    getHomeEightCard,
    querySecondLevelList
} from "src/methods/request.js";
import mixins from "mixins";
export default {
    mixins: [mixins],
    data() {
        return {
            categorylist: [],
            bottomlist: [],
            route: {},
            showBg: false,
            ind: "",
            meunlist: [],
            showMenu: false,
            bottomShow: false
        };
    },
    computed: {
        imgUrl() {
            return this.$store._modules.root._children.a.state;
        }
    },
    created() {
        this.$store.commit("increment", "分类");
        this.getCatelist();
        this.getprolist();
    },
    methods: {
        getcate(item) {
            this.$router.push({
                path: "/categoryDetail",
                query: {
                    cateNo: item.productNo
                }
            });
        },
        // 获取组件数据
        goCategory(item, index) {
            this.ind = index;
            if (item.cateNo == "008") {
                this.bottomlist = [];
                this.showMenu = false;
                this.getprolist();
            } else {
                this.showBg = false;
                this.getMenulevel(item.cateNo, item.cateName);
            }
        },
        goProList(item, index) {
            this.bottomlist = [];
            this.getprolist(item.cateNo, item.cateName, "2");
            this.showMenu = false;
        },
        getMenulevel(cateNo, cateName) {
            querySecondLevelList({ parentNo: cateNo || "" })
                .then(response => {
                    this.meunlist = Object.assign(
                        [],
                        response.data.categoryList
                    );
                    // 图片加域名
                    for (var item of this.meunlist) {
                        item.catePicUrl = this.imgUrl + item.catePicUrl;
                    }
                    this.showMenu = true;
                    if (this.meunlist.length == "0") {
                        this.getprolist(cateNo, cateName, "2");
                        this.showMenu = false;
                    }
                })
                .catch(error => console.log(error));
        },
        getprolist(categoryNo, couponNo, type) {
            this.$vux.loading.show({
                text: "Loading"
            });
            getproductlist({
                categoryNo: categoryNo || "008",
                couponNo: couponNo,
                type: type || "2"
            })
                .then(response => {
                    this.bottomlist = Object.assign(
                        [],
                        response.data.productList
                    );
                    // console.log(this.bottomlist)
                    // 图片加域名
                    for (var item of this.bottomlist) {
                        item.coverPicUrl = this.imgUrl + item.coverPicUrl;
                    }
                    this.$vux.loading.hide();
                    this.showBg = this.bootomlist.length == 0
                })
                .catch(error => {
                    this.$vux.loading.hide();
                    this.showBg = true;
                });
        },
        getCatelist() {
            //获取菜品信息
            getHomeEightCard({})
                .then(response => {
                    this.categorylist = Object.assign(
                        [],
                        response.data.categoryList
                    );
                    this.ind = this.categorylist.length - 1;
                    // 图片加域名
                    for (var item of this.categorylist) {
                        item.catePicUrl = this.imgUrl + item.catePicUrl;
                    }
                })
                .catch(error => console.log(error));
        }
    }
};
</script>
<style lang="less" scoped>
.page{
    position:absolute;
    top:0px;
    width:100%;
    min-height:100%;
    padding-bottom:5rem;
    background-color:#f1f2f3;
    box-sizing:border-box;
    .pages_con{
        height:100%;
    }
}
.menuleft{
    width: 24%;
    background: #ffffff;
}
.menuleft div{
    line-height: 4rem;
    width: 100%;
    border-bottom: 1px solid #dddddd;
}
.menuleft div p{
    font-size: 1.4rem;
    color: #555555;
}
.menuleft .active{
    background: #f1f2f3;
}
.menuleft .active p{
    color: #ed6e36;
}
.listbox {
    z-index: 10;
    box-sizing: border-box;
    width: 76%;
    background-color: #f1f2f3;
    padding: 1rem 3% 0.1rem 3%;
    .list {
        width: 100%;
        height: 7rem;
        overflow: hidden;
        border-radius: 7px;
        margin-bottom: 0.5rem;
        background-color: #ffffff;
        display: flex;
        justify-content: space-between;
        img {
            width: 7rem;
            height: 7rem;
        }
        .listcontent {
            width: 100%;
            height: 7rem;
            box-sizing: border-box;
            .content {
                width: 100%;
                height: 7rem;
                overflow: hidden;
                display: flex;
                align-items: center;
                .cleft {
                    width: 100%;
                    float: left;
                    font-size: 1rem;
                    height: 5rem;
                    .big {
                        height: 2rem;
                        padding: 0 20px 0 20px;
                        text-align: left;
                        box-sizing: border-box;
                        display: flex;
                        justify-content: space-between;
                        align-items: flex-end;
                        p:nth-child(1) {
                            font-size: 1.3rem;
                            color: #ed6e36;
                        }
                        .qiang {
                            font-size: 1rem;
                            height: 2rem;
                            line-height: 2rem;
                            width: 5rem;
                            text-align: center;
                            background-color: #ed6e36;
                            border-radius: 4px;
                            color: #fff;
                            margin-bottom: -6px;
                        }
                    }
                    .more {
                        height: 3rem;
                        line-height:1.5rem;
                        font-size: 1.5rem;
                        text-align: left;
                        word-break: break-all;
                        letter-spacing: 0px;
                        padding: 0 20px 0 20px;
                        box-sizing: border-box;
                    }
                }
            }
        }
    }
    .nodata {
        font-size: 1.8rem;
        position: relative;
        width: 100%;
        padding-top: 5rem;
        .fontcolor {
            color: #c8c8c8;
        }
        img {
            width: 50%;
        }
    }
}
.menuList{
    display: flex;
    flex-wrap: wrap;
}
.menuList .menubox{
    width: 30%;
    margin-right: 4%;
    margin-bottom: 8px;
    padding: 8px;
    border-radius: 5px;
    box-sizing: border-box;
    background: #ffffff;
}
.menuList .menubox:nth-of-type(3n){
     margin-right: 0;
}
.menuList .menubox .imgBox img{
    width: 100%;
}
.menuList .menubox p{
    color: #555555;
    line-height: 16px;
    width: 100%;
    text-align: center;
}
</style>
 

